<template>
	<div>
		<el-dialog :visible.sync="dialogVisible" width="50%">
			<div style="color: #3EA3FF;text-align: center;font-size:20px;margin: 20px 0 20px 0;">处理提示</div>
			<div style="margin: auto;width: 100%;">
				<div v-for="(item,index) in detail" :key="index" style="display: flex;flex-wrap: wrap;"
					:style="{'flex-direction':index%2?'row-reverse':' wrap'}">
					<div v-for="(item1,index1) in item.arr" :key="index1" class="detailBlock" :class="[
						index1==0&&!index%2?'clearBefore':
						item.arr.length-1==index1&&!index%2?['clearAfter']:
		                index1==0&&index%2?'clearAfter':
						item.arr.length-1==index1&&index%2?'clearBefore':'',
						index1==0&&index%2 && item.arr.length==1 ?'clearBefore':'',
						item1.endTime?'':'changeAfter',
						item1.endTime?'':'changeBefore'
						]
						">
						<div :class="[item.arr.length-1==index1&&!index%2&&item.arr.length>3?'addBottom':'',!item1.endTime && item.arr.length-1==index1?'changeBefore':'',]"
							:style="{color:item1.endTime?'':'#f1f1f1'}" style="height: 20px;color: #dadada"
							>{{item1.endTime}}</div>
						<div class="cicle">
							<div class="circle_over"
								:style="{border: item1.endTime?' 1px solid  #3EA3FF':'1px solid  #b5b5b5'}">
								<div class="circle_content"
									:style="{background: item1.endTime?'#3A8EE6':'#b5b5b5'}"></div>
							</div>
						</div>
						<div :style="{color:item1.endTime?'':'#b5b5b5'}" style="font-weight: bold;">
							{{item1.taskName}}
						</div>
					</div>
				</div>
			</div>
		
		</el-dialog>
	</div>
</template>
<script>
	export default {
		name: 'baseStep',
		props: {
		
			detail:{
				type:Array,
				default:()=>[]
			}
		},
		
		data() {
			return {
				dialogVisible:false
			}
		}
	}
</script>

<style scoped>
.detailBlock {
		text-align: center;
		width: 25%;
		margin-bottom: 150px;
	}

	.circle_over {
		width: 20px;
		height: 20px;
		background: #fff;
		border-radius: 100%;
		margin: 10px auto;

	}

	.circle_content {
		width: 16px;
		height: 16px;
		margin: 2px auto;
		border-radius: 100%;
		position: relative;
	}

	.detailBlock {
		width: 25%;
		position: relative;
		text-align: center;

	}

	.detailBlock::after {
		content: ' ';
		position: absolute;
		width: 50%;
		height: 2px;
		background: #3A8EE6;
		top: 50%;
		right: -15px;
	}


	.detailBlock::before {
		content: ' ';
		position: absolute;
		width: 50%;
		height: 2px;
		background: #3A8EE6;
		top: 50%;
		left: -15px;
	}

	.addBottom::before {
		content: ' ';
		position: absolute;
		width: 2px;
		height: 100px;
		background: #3A8EE6;
		top: 100px;
		left: 50%;
	}

	.changeBefore::before {
		background: #b5b5b5!important;
	}

	.changeAfter::after {
		background: #b5b5b5!important;
	}

	.clearBefore::before {
		content: none;
	}

	.clearAfter::after {
		content: none;
	}
</style>
